<template>
  <div class="Tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="#" type="index" show-overflow-tooltip width="50" align="center"></el-table-column>
      <el-table-column prop="title" label="角色名" align="center"></el-table-column>
      <el-table-column prop="description" label="描述" align="center"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="update_time" label="更新时间" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
             <el-switch v-model="scope.row.status" :disabled="!checkPermission(['roleStatus'])" @change="changestatus(scope.row.status,scope.row.id)" :active-value='1' :inactive-value='0'></el-switch>
         </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center" width="200" fixed="right">
        <template slot-scope="scope">
              <el-button type="text" v-if="checkPermission(['roleUpdate'])" class="tableButton" @click="editform(scope.row.id)">编辑</el-button>
              <el-button type="text" v-if="checkPermission(['roleSetting'])" class="tableButton" @click="roleEdit(scope.row)" :disabled="role.indexOf(scope.row.id)!=-1">权限设置</el-button>
              <el-button type="text" v-if="checkPermission(['roleDelete'])" class="tableButton" @click="deleteitem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.page"
          :page-sizes="[10, 20, 30]" :page-size="10" background layout="total, sizes, prev, pager, next" :total="pages.total"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  //按钮权限验证
  //api
  import {
  accountRoleUpdatestatus,

  } from '@/api/rule'

  import checkPermission from "@/utils/permission";
  export default {
    data() {
      return {
        //表格数据
        tableData: [],
        //页码数据
        pages: {},
        role:[]
      }
    },
    props: {
      //表格数据
      tabData: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    watch: {
      tabData(val) {
        this.tableData = val.list
        this.pages = val.page,
        this.role=val.role
      },
    },
    methods: {
      //权限验证
      checkPermission,
      handleSizeChange(val) {
        this.$emit('changepageTotal', val)
      },
      handleCurrentChange(val) {
        this.$emit('changepage', val)
      },
      //修改热门状态
      async changestatus(val,id){
        let state = val?0:1
        let params = {
          id,
          status:state
        }
        let data = await accountRoleUpdatestatus(params)
        if(data.code=='0000'){
          this.$message.success('修改状态成功！')
          //刷新列表
          this.$emit('refreshdata')
        }else{
          //刷新列表
          this.$emit('refreshdata')
        }
      },
      //编辑
      editform(id) {
        let params = {
          id,
          type: 1
        }
        //显示dialog通知父组件打开弹窗
        this.$emit('openedit', params)
      },
      //删除
      deleteitem(id) {
        this.$emit('deleteitem', id)
      },
      roleEdit(val){
        let params = {
          id:val.id,
          title:val.title
        }
         this.$emit('roleEdit', params)
      }
    },
  }
</script>

<style scoped lang='scss'>
  .tableButton {
    padding: 0;
    font-size: 14px;
  }

  .Tables {
    margin-top: 25px;
  }

  .edittext {
    margin: 0 10px;
    color: #4c68ef;
    cursor: pointer;
  }

  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
</style>
